<!--
 * @Description: 
 * @Author: 李成
 * @CreateTime: 2025-02-27 16:49:21
 * @LastEditors: 李成
 * @UpdateTime: 2025-02-27 16:49:21
-->
<template>
  <div class="green">
    这是子应用（vue-app）的home页面
    <div>这是基座传过来的值： {{ JSON.stringify( stateStore) }}</div>
    <button @click="changeBaseProps">改变基座的值</button>
    <div>这是父组件的公共方法改变的值{{r}}</div>
    <button @click="callbackAdd">调用父级的公共方法</button>
  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import { add } from 'base/utils'
import GlobalState from '@/utils'
import { useMainAppPropsStore } from '@/stores/mainAppPropsStore';
import { describe } from 'node:test';
const mainAppPropsStore = useMainAppPropsStore();
// console.log("存储到状态管理里面去", mainAppPropsStore.mainAppProps, mainAppPropsStore.$state)

const r = ref(1)
const stateStore = ref({})
const callbackAdd = () => {
  r.value = add(r.value, 2)
}

// 在其他地方使用时，直接调用：
const globalState = GlobalState.getInstance();
console.log('这里应该有值了吧', globalState);
globalState.onGlobalStateChange((state: any, prev:any) => {
  console.log('这里应该有值了吧-state', state);
  console.log('这里应该有值了吧-prev', prev);
  stateStore.value = state
})

const changeBaseProps = () => {
  globalState.setGlobalState({
    baseProps: {
      ...stateStore.value,
      name: '我是全局state',
      age: 18,
      desc: '这是子应用改变后的值'
    }
  })
}

// globalState.onGlobalStateChange((state: any) => {
//   console.log('state', state);
// });

</script>

<style scoped>
.green{
  color: green;
  background-color: rgba(0, 200, 0, 0.1);
}
</style>